import { Button, Descriptions, Divider, Form, Input, Progress, Radio, Select } from 'antd'
import './index.less'
import { history, request, useIntl, useModel } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import MyEchartsCom from '@/components/myEcharts';
import moment from 'moment';
import { useEffect, useState } from 'react';
let Time1 = null;
export default () => {
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 4 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 20 },
        },
    };
    const twoColors = {
        '0%': '#108ee9',
        '100%': '#87d068',
    };
    const initChart = () => {
        let xAxis = [];
        let yAxis = [];
        let yAxis1 = [];
        let dataSource = [];
        let allCount = 0;
        for (let i = 0; i < reportdata['WLW_005'].length; i++) {

            xAxis.push(reportdata['WLW_005'][i]['tjdt']);
            yAxis.push(reportdata['WLW_005'][i]['m_value1']);
            allCount += reportdata['WLW_005'][i]['m_value1']
            // yAxis1.push(reportdata['WLW_005'][i]['m_value2']);
        }
        //xAxis 插入最近12个月的月份 moment
        for (let i = 0; i < reportdata['WLW_005'].length; i++) {
            yAxis1.push(Math.floor(allCount / reportdata['WLW_005'].length));
            // yAxis1.push(reportdata['WLW_005'][i]['m_value2']);
        }

        // dataSource.map((e, i) => {
        //     xAxis.push(e?.date_id);
        //     if (e.jmlx == "居民用户") {
        //         yAxis.push(e?.m_value);
        //     } else {
        //         yAxis1.push(e?.m_value);
        //     }


        // });
        // //xAxis 去重
        // xAxis = Array.from(new Set(xAxis));
        return {
            title: {
                text: '近12个月用气量与用气费用分析',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: xAxis
            },
            legend: {
                data: ['用气量', '用气费用'],
                right: '8%'
            },
            yAxis: [
                {
                    type: 'value'
                },
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    data: yAxis,
                    type: 'line',
                    name: '用气量',
                    barWidth: 20,
                    //区分y坐标
                    yAxisIndex: 0

                },
                {
                    data: yAxis1,
                    type: 'line',
                    yAxisIndex: 1,
                    name: '月平均用气量',
                }
            ]
        };
    }
    const initChart1 = () => {
        let xAxis = [];
        let yAxis = [];
        let yAxis1 = [];
        let dataSource = [];
        //xAxis 插入最近12个月的月份 moment
        for (let i = 0; i < 12; i++) {

            xAxis.push(moment().subtract(i, 'month').format('YYYY-MM'));
        }
        //翻转
        xAxis = xAxis.reverse();
        //yAxis 插入最近12个月的数据
        for (let i = 0; i < 12; i++) {
            let num = Math.floor(Math.random() * 100);
            yAxis.push(0);
            yAxis1.push(0);
        }

        // dataSource.map((e, i) => {
        //     xAxis.push(e?.date_id);
        //     if (e.jmlx == "居民用户") {
        //         yAxis.push(e?.m_value);
        //     } else {
        //         yAxis1.push(e?.m_value);
        //     }


        // });
        // //xAxis 去重
        // xAxis = Array.from(new Set(xAxis));
        return {
            title: {
                text: '近12个同业用气量趋势比较分析',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: xAxis
            },
            legend: {
                data: ['用气量', '用气费用'],
                right: '8%'
            },
            yAxis: [
                {
                    type: 'value'
                },
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    data: yAxis,
                    type: 'bar',
                    name: '同业月度用气量',
                    barWidth: 20,
                    //区分y坐标
                    yAxisIndex: 0

                },
                {
                    data: yAxis1,
                    type: 'line',
                    yAxisIndex: 1,
                    name: '月度用气量',
                    areaStyle: {}
                }
            ]
        };
    }

    const [listObj, setListObj] = useState({});
    const [entity_name, setEntity_name] = useState('');
    const [list, setList] = useState([]);
    const [acct_id, setAcct_id] = useState('');
    const [reportdata, setreportdata] = useState(null);
    const getList = () => {
        request('/data/dynamic/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                apiID: 'WLW_001',
                apiParam: {
                    'entity_name': entity_name,
                    "paging": { "pageSize": 10, "pageNum": 1 },
                }
            }
        }).then((res) => {
            console.log(res);
            let data = res?.data?.data;
            let nlist = [];
            let nlistObj = {};
            data.map((item) => {
                nlist.push({
                    value: item.acct_id,
                    label: item.entity_name,
                })
                nlistObj[item.acct_id] = item;
            })
            setListObj(nlistObj);
            setList(nlist);
        })
    }
    const getDataItem = (apiID) => {
        return new Promise((resolve, reject) => {
            request('/data/dynamic/query', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                data: {
                    apiID: apiID,
                    apiParam: {
                        'acct_id': acct_id,
                        'tjdt': moment().subtract(1, 'year').format('YYYYMM')
                    }
                }
            }).then((res) => {
                let data = res?.data?.data || [];
                if (data.length == 0) {
                    data = [{}]
                }
                resolve(data);
            })
        })

    }
    const getMainData = async () => {
        let newData = {};
        for (let i = 2; i < 6; i++) {
            let dataitem = await getDataItem('WLW_00' + i);
            console.log(dataitem);
            newData['WLW_00' + i] = dataitem;
        }
        setreportdata(newData);
    }
    useEffect(() => {
        if (entity_name != '') {
            if (Time1 != null) {
                clearTimeout(Time1);
            }
            Time1 = setTimeout(() => {
                getList();
            }, 500);
        }

    }, [entity_name])
    useEffect(() => {
        if (acct_id) {
            getMainData();
        }
    }, [acct_id])
    useEffect(() => {
        if (reportdata) {
            initChart();
            initChart1();
        }

    }, [reportdata])
    const getValues = (value) => {
        try {

        } catch (error) {

        }
    }

    return <div className='queryPage'>
        <div className="globalheader globalheader2">
            <div className='globalheaderSearch'>
                <div className='globalheaderSearchIcon'>用户搜索</div>
                <Select
                    showSearch
                    value={acct_id}
                    onSearch={(value) => {
                        console.log(value);
                        setEntity_name(value)
                    }}
                    onChange={(value, option) => {
                        console.log(option);
                        setAcct_id(value)
                    }}
                    optionFilterProp="label"
                    defaultActiveFirstOption={false}
                    suffixIcon={null}
                    filterOption={false}
                    notFoundContent={null}
                    className='globalheaderSearchSelect'
                >
                    {
                        list.map((item) => {
                            return <Select.Option value={item.value}>{item.label}</Select.Option>
                        })
                    }
                </Select>
            </div>
        </div>
        <div className="content">
            <div className='descItemTitle'>天然气用户报告</div>
            {
                reportdata != null && <div className='descItemContent'>
                    <Descriptions column={3}>
                        <Descriptions.Item label="用户名称" span={3}>{listObj[acct_id]?.entity_name}</Descriptions.Item>
                        <Descriptions.Item label="用户地址" span={3}>{listObj[acct_id]?.address1}</Descriptions.Item>
                        <Descriptions.Item label="用户类型">{listObj[acct_id]?.cust_type}</Descriptions.Item>
                        <Descriptions.Item label="用气类型">{listObj[acct_id]?.gas_type}</Descriptions.Item>
                        <Descriptions.Item label="开户时间">{listObj[acct_id]?.setup_dt}</Descriptions.Item>
                        <Descriptions.Item label="点火时间">{listObj[acct_id]?.fire_dt}</Descriptions.Item>
                        <Descriptions.Item label="用气状态">{listObj[acct_id]?.sp_status_desc}</Descriptions.Item>
                        <Descriptions.Item label="缴费状态">待</Descriptions.Item>
                    </Descriptions>

                    <div className='descItemContentLine'></div>
                    <div className='otherInfo'>
                        <div className='otherInfoLeft'>
                            <Descriptions column={3}>
                                <Descriptions.Item label="累计用气量">{reportdata['WLW_003'][0]['m_value3'] || '-'}m³</Descriptions.Item>
                                <Descriptions.Item label="月平均用气量">{reportdata['WLW_003'][0]['m_value4'] || '-'}m³</Descriptions.Item>
                                <Descriptions.Item label="月平均缴纳金额">{reportdata['WLW_003'][0]['m_value2'] || '-'}元</Descriptions.Item>
                                <Descriptions.Item label="最新安检结果">{reportdata['WLW_004'][0]['m_value1'] || '-'}</Descriptions.Item>
                                <Descriptions.Item label="历史隐患数量">{reportdata['WLW_004'][0]['m_value2'] || '-'}</Descriptions.Item>
                            </Descriptions>
                        </div>
                        {/* <div className='otherInfoRight'>
                            <MyEchartsCom option={initChart1()} title='近12个月用气量与用气费用分析' hidetitle style={{ width: '100%', height: '200px' }} />
                        </div> */}
                    </div>
                    <div className='descItemContentLine'></div>
                    <div className='ProgressWrap'>
                        <div className='ProgressItem'>
                            <div>{reportdata['WLW_002'][0]['m_value1'] || '-'}%</div>
                            <div className='ProgressItemTitle'>
                                当月用气量同比分析
                            </div>
                        </div>
                        <div className='ProgressItem'>
                            <div>{reportdata['WLW_002'][0]['m_value2'] || '-'}%</div>
                            <div className='ProgressItemTitle'>
                                当月用气费用同比分析
                            </div>
                        </div>
                        <div className='ProgressItem'>
                            <div>{reportdata['WLW_003'][0]['m_value1'] || '-'}%</div>
                            <div className='ProgressItemTitle'>
                                年度欠费率
                            </div>
                        </div>
                    </div>

                    <div className='descItemContentLine'></div>
                    <MyEchartsCom option={initChart()} title='近12个月用气量与用气费用分析' hidetitle style={{ width: '100%', height: '400px' }} />
                    <div className='descItemContentLine'></div>
                    <div>
                        <div>免责声明</div>
                        <div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                    </div>
                </div>
            }


        </div>
    </div>
}